<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/fore/index.css">
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.css">
    <link rel="stylesheet" href="css/fore/lunbotu.css">
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="css/fore/Cooldog.css">
    <link rel="stylesheet" href="css/fore/iconfont.css">
    <script src="js/Cooldog.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/fetch.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="allContent">
<div class="header">
    <div class="top">
        <div class="top-logo fl">
            <a id="logo" href="#nowhere"><img src="img/car-logo.png" alt="" class="fl" style="margin-top: 20px;width: 45px">
                <span class="top-logo-text">练车预约系统</span></a>
        </div>
        <div class="top-login">
            <div class="loginbox">
                <div class="loginbox-r" title="个人中心">
                    <a href="upperson.html" v-if="user != null">
                        <img :src="['img/student/' + user.pic]" class="img-circle">
                    </a>
                    <a v-else href="login.html" style="line-height: 80px;" class="loginbtn">
                        登录
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-nav">
        <ul id="nav-list">
            <li class="nav-list-li"><a href="index.html">首页</a></li>
            <li class="nav-list-li"><a href="selectcoach.html">明星教练</a></li>
            <li class="nav-list-li"><a href="testorder.html">考试报名</a></li>
            <li class="nav-list-li"><a href="order.html">练车预约</a></li>
            <li class="nav-list-li"><a href="teachingvideo.html">驾考视频</a></li>
            <li class="nav-list-li"><a href="register.html">驾校报名</a></li>
        </ul>
    </div>
</div>
<div class="main">

    <div class="Cooldog_container">
        <div class="Cooldog_content">
            <ul>
                <li class="p1">
                    <a href="#">
                        <img src="img/lunbo/1.jpg" alt="">
                    </a>
                </li>
                <li class="p2">
                    <a href="#">
                        <img src="img/lunbo/2.png" alt="">
                    </a>
                </li>
                <li class="p3">
                    <a href="#">
                        <img src="img/lunbo/3.jpg" alt="">
                    </a>
                </li>
                <li class="p4">
                    <a href="#">
                        <img src="img/lunbo/4.jpg" alt="">
                    </a>
                </li>
                <li class="p5">
                    <a href="#">
                        <img src="img/lunbo/5.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <a href="javascript:;" class="btn_left">
            <i class="iconfont icon-zuoyoujiantou"></i>
        </a>
        <a href="javascript:;" class="btn_right">
            <i class="iconfont icon-zuoyoujiantou-copy-copy"></i>
        </a>

        <div class="buttons clearfix">
            <a href="javascript:;" class="color"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/Cooldog.js"></script>
    <div class="inner">
        <a href="https://qiaodan.jd.com/" target="_blank">
            <img src="img/bg-blue.png" width="1240" height="90">
        </a>
    </div>
    <div style="clear: both"></div>
    <div class="area" style="margin-top: 15%" align="center">
        <h2 class="area-title">驾校介绍</h2>
        <div class="title_sub"></div>
        <div class="col-left" style="width: 85%">
            <a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大连市甘井子区汽车驾驶学校（简称甘井子驾校），创建于2018年，是甘井子区区属创新型企业，亦是甘井子区配套服务机构，位于甘井子区红凌路，占地3000余亩，三面环山一面临海，周边有星海广场、森林动物园、城堡酒店、银石滩、东港等多处自然风景和人文景观。建立以来，我们秉持着“务实、创新、卓越、致远”的精神，致力于打造人文驾校、绿色驾校、科技驾校，力求把服务做到更好。甘井子驾校拥有山路和城市训练道路86公里，建有大连市最大的法规培训教学楼和先进的电教、考试设备及独立的考试场和科目齐全的训练场。这里以其严谨的教学计划、规范的培训教程、周到的贴心服务和优美的校园环境，受到广大学员欢迎，考试合格率在同行业中名列前茅，得到了行业主管部门和社会各界认可。
            </a>
            <img src="img/aboutCarCompany.jpg" id="img1" style=" width: 100%">
        </div>
        <!--<div class="col-right fr">-->
        <!--<div class="col-right-top">-->
        <!--</div>-->
        <!--</div>-->
    </div>
    <div class="area" style="margin-top: 15%">
        <h2 class="area-title">驾考资讯 </h2>
        <div class="title_sub"></div>
        <div class="col-left">
            <ul>
                <li v-for="a,i in as" v-if="a.type == '驾考规则'">
                    <a :href="'article.html?id=' + a.id">
                        >>>&nbsp;{{a.title}}
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-left">
            <ul>
                <li v-for="a,i in as" v-if="a.type == '驾考技巧'">
                    <a :href="'article.html?id=' + a.id">
                        >>>&nbsp;{{a.title}}
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-right fr">
            <div class="col-right-top"><img src="img/flower1.jpg" alt=""></div>
            <div class="col-right-top mt"><img src="img/flower2.jpg" alt=""></div>
        </div>
    </div>


</div>
</div>
<div class="footer">
    <p>
        Good CarTeacher©2018 | QQ:123456789
        <a href="#">|关于我们</a>
        <a href="login.html">|驾校登录</a>
    </p>
</div>
<script>
    var url = "fore_student_index";
    new Vue({
        el: '#allContent',
        data: {
            user: [],
            as: [],
        },
        mounted: function () {
            self = this;
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    console.log(jsonObject);
                    self.user = jsonObject.user; //数组
                    self.as = jsonObject.as;
                    console.log(self.as);
                }).catch(function (err) {
                    console.log("Fetch错误：" + err);
                })
            })
        }
    });
</script>
<!--<script src="js/lunbo.js"></script>-->
</body>
</html>